<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div id="box">hello</div>
</body>
<script>

    var box = document.querySelector("#box");

    var clientW = document.documentElement.clientWidth;
    var boxW = box.offsetWidth;
    var clientH = document.documentElement.clientHeight;
    var boxH = box.offsetHeight;

    // 在触发拖拽的元素身上添加按下事件
    box.addEventListener("mousedown", function(eve){
        var downE = eve || window.event;
        // 移动
        document.addEventListener("mousemove", move);
        // 抬起
        document.addEventListener("mouseup", up);

        // 移动的事件处理函数，封装出来是为了方便将来删除
        function move(eve){
            var moveE = eve || window.event;
            // 计算元素位置：移动时鼠标相对于页面的坐标 - 按下时鼠标相对于当前元素的坐标
            var l = moveE.pageX - downE.offsetX;
            var t = moveE.pageY - downE.offsetY;

            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>clientW-boxW) l=clientW-boxW;
            if(t>clientH-boxH) t=clientH-boxH;

            // 将限定之后的数据，设置给元素的位置
            box.style.left = l + "px";
            box.style.top = t + "px";
        }
        // 抬起的事件处理函数，封装出来是为了方便将来删除
        function up(){
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", up);
        }
    });
    
</script>
</html>